.App-controller {
  $space-1: 12px;
  z-index: 1000;
  & {
    .game-title {
      position: fixed;
      left: 50%;
      top: 6px;
      transform: translateX(-50%);
      color: white;
      padding-inline: 12px;
      padding-block: 6px;
      border-radius: 6px;
      cursor: pointer;
      &::selection {
        background-color: transparent;
      }
    }

    .cg-btn {
      position: absolute;
      right: 0;
      bottom: 0;
      transform: translate(-1 * $space-1, -1 * $space-1);
      z-index: 1001;
    }

    .reset-btn {
      position: absolute;
      right: 0;
      bottom: 0;
      transform: translate(
        -1 * $space-1,
        calc(-1 * $space-1 - 1 * (100% + $space-1))
      );
    }

    .settings-btn {
      position: absolute;
      left: 0;
      top: 0;
      padding-block: $space-1;
      opacity: 0.5;
      transition: all 0.1s ease-in-out;
      cursor: pointer;
      &:hover {
        opacity: 1;
      }
    }

    .timer {
      position: absolute;
      right: 0%;
      top: 0%;
      margin-right: 2 * $space-1;
      margin-top: 2 * $space-1;
      color: #fff;
      &::selection {
        background-color: transparent;
      }
    }

    *[class^="style_joystick"] {
      $mg: 40px;

      position: absolute;
      bottom: $mg;
      left: $mg;
    }
  }
}
